/*
 * @Author: 飞越疯人院 353362604@qq.com
 * @Date: 2023-02-15 14:29:32
 * @LastEditors: 飞越疯人院 353362604@qq.com
 * @LastEditTime: 2023-02-16 15:27:14
 * @FilePath: \adminstration\src\Pages\Front\Common\Command\CommandMap.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { useRef, useEffect } from 'react'
import { useEventEmitter, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { Initialization, InitializationData } from '../../../../Common/Mars3d/Initialization'
import { WebTemplateUrl } from '../Template/configuration'
import { useState } from 'react'

const { mars3d, Cesium } = window

const imageList = { 1: 'command001.png', 2: 'command002.png' }

export const CommandMap = ({ sceneId, MapAddress, SOSMapAddress }) => {
    const { runAsync: getCmtAddress } = useRequest(Http, { manual: true })

    const [Map, setMap] = useState()
    const [Gra, setGra] = useState()

    const Mars3dBox = useRef()
    const InitializationEvent = useEventEmitter()
    InitializationEvent.useSubscription(({ map, gra, uuid }) => {
        getScenesDetails({ url: `getScenesDetailsUuid`, path: [uuid] }).then(res => {
            InitializationData(map, gra, res)
            setGra(gra)
            setMap(map)
        })
    })
    const { runAsync: getScenesDetails } = useRequest(Http, { manual: true })
    const { run: getScenes } = useRequest(Http, {
        manual: true,
        onSuccess: res => Initialization(res, Mars3dBox, InitializationEvent),
    })
    useEffect(() => {
        getScenes({ url: `getScenesID`, path: [sceneId] })
    }, [getScenes, sceneId])

    MapAddress.useSubscription(val => {
        const { key, title, helmetType } = val.data
        const { status } = val.event

        getCmtAddress({ url: 'getHelmetPosition', data: { sip: key } }).then(res => {
            if (res?.length === 0) return false
            const [{ lat, lon }] = res
            if (status === '1') {
                const graphic = new mars3d.graphic.BillboardEntity({
                    id: key,
                    position: [lon, lat, 0],
                    style: {
                        clampToGround: true,
                        image: WebTemplateUrl + imageList[helmetType],
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        label: {
                            text: title,
                            color: 'white',
                            pixelOffsetY: -80,
                            outline: true,
                            font_size: 22,
                            font_weight: 'bold',
                            outlineColor: 'rgba(0, 0, 0, 0.30)',
                        },
                    },
                })
                Gra.addGraphic(graphic)
            } else {
                if (Gra.getGraphicById(key)) Gra.removeGraphic(Gra.getGraphicById(key))
            }
        })
    })

    SOSMapAddress.useSubscription(val => {
        if (Gra) {
            const { id, position, type, name } = val
            if (type === 1) {
                if (Gra.getGraphicById(id)) {
                    Map.flyToGraphic(Gra.getGraphicById(id))
                } else {
                    // SOSMap.png
                    const graphic = new mars3d.graphic.BillboardEntity({
                        id,
                        position,
                        style: {
                            clampToGround: true,
                            image: WebTemplateUrl + 'SOSMap.png',
                            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                            label: {
                                text: name,
                                color: 'white',
                                pixelOffsetY: -80,
                                outline: true,
                                font_size: 22,
                                font_weight: 'bold',
                                outlineColor: 'rgba(0, 0, 0, 0.30)',
                            },
                        },
                    })
                    Gra.addGraphic(graphic)
                    Map.flyToGraphic(Gra.getGraphicById(id))
                }
            } else {
                if (Gra.getGraphicById(id)) Gra.removeGraphic(Gra.getGraphicById(id))
            }
        }
    })

    return (
        <div className="CommandMap">
            <div className="OverviewMap" ref={Mars3dBox}></div>
            <img className="Mask" src={WebTemplateUrl + 'Mask.png'} alt="" />
        </div>
    )
}
